<template>
  <div class="data-collect-content">
    <div class="data-collect-content__left">
      <page>
        <template slot="title">条码信息</template>
        <p-form>
          <p-form-item label="SN/PN码">
            <p-input :value="snpn" read-only />
          </p-form-item>
        </p-form>
      </page>
      <page class="flex1 mt20">
        <template slot="title">
          <p-button type="primary" class="float-right" @click="toBind"
            >容器绑定</p-button
          >
          完成列表</template
        >
        <p-table
          size="middle"
          bordered
          rowKey="id"
          :pagination="false"
          :columns="leftTable.columns"
          :dataSource="leftTable.dataSource"
          :loading="leftTable.loading"
        />
      </page>
    </div>
    <div flex="auto" class="data-collect-content__right">
      <order-detail :item="orderItem" />
      <page class="flex1 mt20">
        <template slot="title">历史数据</template>
        <p-table
          size="middle"
          bordered
          rowKey="id"
          :pagination="false"
          :columns="rightTable.columns"
          :dataSource="rightTable.dataSource"
          :loading="rightTable.loading"
        />
      </page>
    </div>
  </div>
</template>

<script>
import mixins from "./mixins";
import OrderDetail from "../../productionExecution/components/order-detail";
import { getAction, postAction } from "@/api/manage";

export default {
  mixins: [mixins],
  components: {
    OrderDetail,
  },
  data() {
    return {
      orderItem: {},
      snpn: "",
      leftTable: {
        loading: false,
        dataSource: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          pageSizeOptions: ["10", "20", "30"],
          showSizeChanger: true,
          onChange: (current) => {
            this.leftTable.pagination.current = current;
            this.getFinishData();
          },
          onShowSizeChange: (current, pageSize) => {
            this.leftTable.pagination.pageSize = pageSize;
            this.leftTable.pagination.current = 1;
            this.getFinishData();
          },
        },
        columns: [
          {
            title: "序号",
            dataIndex: "rowIndex",
            width: 50,
            align: "center",
            customRender(text, record, index) {
              return index + 1;
            },
          },
          {
            title: "工序工单 ",
            align: "center",
            dataIndex: "processBillNo",
          },
          {
            title: "SN/PN",
            align: "center",
            dataIndex: "pnsn",
          },
          {
            title: "数量",
            align: "center",
            dataIndex: "collectionQty",
          },
        ],
      },
      rightTable: {
        loading: false,
        dataSource: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          pageSizeOptions: ["10", "20", "30"],
          showSizeChanger: true,
          onChange: (current) => {
            this.rightTable.pagination.current = current;
            this.getData();
          },
          onShowSizeChange: (current, pageSize) => {
            this.rightTable.pagination.pageSize = pageSize;
            this.rightTable.pagination.current = 1;
            this.getData();
          },
        },
        columns: [
          {
            title: "序号",
            dataIndex: "rowIndex",
            width: 50,
            align: "center",
            customRender(text, record, index) {
              return index + 1;
            },
          },
          {
            title: "线体",
            align: "center",
            dataIndex: "lineName",
          },
          {
            title: "工站",
            align: "center",
            dataIndex: "stationName",
          },
          {
            title: "工序工单",
            align: "center",
            dataIndex: "processBillNo",
          },
          {
            title: "产品编码",
            align: "center",
            dataIndex: "productCode",
          },
          {
            title: "产品描述",
            align: "center",
            dataIndex: "productName",
          },
          {
            title: "SN",
            align: "center",
            dataIndex: "pnsn",
          },
        ],
      },
    };
  },
  methods: {
    getFinishData() {
      this.getData(this.leftTable, 0);
    },
    //保存条码并获得工单信息
    getInfo() {
      if (!this.params.stationCode) {
        this.$message.error("请选择工站");
        return;
      }
      if (!this.barCode) {
        this.$message.error("请扫码");
        return;
      }
      const params = {
        pnsn: this.barCode,
        stationCode: this.params.stationCode,
      };
      postAction("/mes-manufacture/mfWip/barCodeCollection", params).then(
        (res) => {
          if (res.success) {
            this.orderItem = res.data.process;
            this.$message.success("采集成功");
            this.onParamsChange();
          } else {
            this.$message.error(res.msg);
          }
        }
      );
    },
    getData(table = this.rightTable, bindFlag = null) {
      if (!this.barCode) {
        table.dataSource = [];
        return;
      }
      table.loading = true;
      const { pagination } = table;
      const params = {
        limit: pagination.pageSize,
        pageNo: pagination.current,
        processbillId: this.orderItem.processbillId || "",
        processbillNo: this.orderItem.processbillNo || "",
        stationCode: this.params.stationCode,
        bindFlag,
      };
      postAction(
        "/mes-manufacture/mfWip/getBarCodeCollectionHistory",
        params
      ).then((res) => {
        table.loading = false;
        table.dataSource = res.data || [];
      });
    },
    onParamsChange() {
      this.getFinishData();
      this.getData();
    },
    setData(scanResults, scanOrders) {
      this.snpn = scanResults[0];
      this.getInfo();
      this.$emit("reset");
    },
    toBind() {
      this.$router.push({
        path: "/work/datacollect/Containerbind",
        query: {
          data: this.orderItem.processBillNo || this.orderItem.processbillno,
          lineno: this.params.lineno,
          stationCode: this.params.stationCode,
        },
      });
    },
  },
};
</script>
